<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <base  th:href="@{/}" href="/bookstore/">
    <link rel="stylesheet" href="static/css/minireset.css" />
    <link rel="stylesheet" href="static/css/common.css" />
    <link rel="stylesheet" href="static/css/cart.css" />
    <script src="static/script/vue.js"></script>
  </head>
  <body>
    <div class="header">
      <div class="w">
        <div class="header-left">
          <a href="index.html">
            <img src="static/img/logo.gif" alt=""
          /></a>
          <h1>我的购物车</h1>
        </div>
        <div class="header-right">
          <h3>欢迎<span>张总</span>光临尚硅谷书城</h3>
          <div class="order"><a href="pages/order/order.html">我的订单</a></div>
          <div class="destory"><a href="index.html">注销</a></div>
          <div class="gohome">
            <a href=" index.html">返回</a>
          </div>
        </div>
      </div>
    </div>
    <div class="list" id="app">
      <div class="w">
        <table>
          <thead>
            <tr>
              <th>图片</th>
              <th>商品名称</th>

              <th>数量</th>
              <th>单价</th>
              <th>金额</th>
              <th>操作</th>
            </tr>
          </thead>

          <tbody th:if="${session.cart == null}">
          <tr >
            <td th:colspan="6">
              <a href="index.html">购物车空空如也，请抓紧购物吧！</a>
            </td>
          </tr>
          </tbody>

          <tbody th:if="${session.cart != null}">
            <tr th:each="carItemEntry : ${session.cart.cartItemMap}">
              <td>
                <img th:src="${carItemEntry.value.imgPath}" alt="" />
              </td>
              <td th:text="${carItemEntry.value.bookName}">活着</td>
              <td>
                <a class="count" th:href="@{/cart(method='countDecrease',id=${carItemEntry.value.bookId})}">-</a>
                <input @change="updateCartItemCount"  class="count-num" type="text"  th:value="${carItemEntry.value.count}"value="1" />
                <input type="hidden" th:value="${carItemEntry.value.bookId}">
                <a class="count" th:href="@{/cart(method='countIncrease',id=${carItemEntry.value.bookId})}">+</a>
              </td>
              <td th:text="${carItemEntry.value.price}">36.8</td>
              <td th:text="${carItemEntry.value.amount}">36.8</td>
              <td><a th:href="@{/cart(method='removeCartItem',id=${carItemEntry.value.bookId})}">删除</a></td>
            </tr>
          </tbody>

        </table>
        <div class="footer" th:if="${session.cart != null}">
          <div class="footer-left">
            <a href="cart?method=cleanCart" class="clear-cart">清空购物车</a>
            <a href="#">继续购物</a>
          </div>
          <div class="footer-right">
            <div>共<span th:text="${session.cart.totalCount}">3</span>件商品</div>
            <div class="total-price">总金额<span th:text="${session.cart.totalAmount}">99.9</span>元</div>
            <a class="pay" href="protected/orderClient?method=checkout">去结账</a>
          </div>
        </div>
      </div>
    </div>
    <div class="bottom">
      <div class="w">
        <div class="top">
          <ul>
            <li>
              <a href="">
                <img src=" static/img/bottom1.png" alt="" />
                <span>大咖级讲师亲自授课</span>
              </a>
            </li>
            <li>
              <a href="">
                <img src=" static/img/bottom.png" alt="" />
                <span>课程为学员成长持续赋能</span>
              </a>
            </li>
            <li>
              <a href="">
                <img src=" static/img/bottom2.png" alt="" />
                <span>学员真是情况大公开</span>
              </a>
            </li>
          </ul>
        </div>
        <div class="content">
          <dl>
            <dt>关于尚硅谷</dt>
            <dd>教育理念</dd>
            <!-- <dd>名师团队</dd>
            <dd>学员心声</dd> -->
          </dl>
          <dl>
            <dt>资源下载</dt>
            <dd>视频下载</dd>
            <!-- <dd>资料下载</dd>
            <dd>工具下载</dd> -->
          </dl>
          <dl>
            <dt>加入我们</dt>
            <dd>招聘岗位</dd>
            <!-- <dd>岗位介绍</dd>
            <dd>招贤纳师</dd> -->
          </dl>
          <dl>
            <dt>联系我们</dt>
            <dd>http://www.atguigu.com</dd>
            <dd></dd>
          </dl>
        </div>
      </div>
      <div class="down">
        尚硅谷书城.Copyright ©2015
      </div>
    </div>
  <script>
    var vue = new Vue({
      "el":"#app",
      method:{

        updateCartItemCount(){
          var bookId = event.target.nextElementSibling.value();
          var newCount = event.target.value;
          //校验newCount的格式是否正确
          var reg = /^[1-9][0-9]*$/

          if (reg.test(newCount)) {
            //发送请求携带请求参数
            location.href = "cart?method=updateCartItemCount&id="+bookId+"&newCount="+newCount
          }else {
            alert("请输入正确的数量")
          }
        }
      }
    });
  </script>
  </body>
</html>
